<template>
	<view class="like" @click="add()">
		<image src="../static/icos/praise.png" class="icon"></image>
		<view class="word">赞一下</view>
		<view :class="moveClass" ref="a">+1</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moveClass:["add"]
			};
		},
		methods:{
			add(){
				this.moveClass=["add","move-satrt"]
				setTimeout(()=>{
					this.moveClass=["add","move-end"]
				},1000)
			}
		}
	}
</script>

<style scoped>
.like{
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
.icon{
	width: 20px;
	height: 20px;
}
.word,.add{
	color: #f4b945;
	font-size: 14px;
}
.add{
	position: absolute;
	opacity: 0;
}
.move-satrt{
	opacity: 1;
	transition: all 200ms linear;
	transform: translateY(-20px);
}
.move-end{
	transition: all 0s;
	transform: translateY(0px);
	opacity: 0;
}
</style>
